<template>
  <div class="customer-detail">
    <div class="head-nav">
      <a href="javascript:;" class="cur" @click="handleSwitchNav(0)">会员详情</a>
      <a href="javascript:;" @click="$router.push({name: 'CustomerOrderDetail', params: {sid: ssoid}})">交易记录</a>
      <!-- <a href="javascript:;" :class="{ cur : axisVisible }" @click="handleSwitchNav(2)">时间轴</a> -->
    </div>
    <div class="detail-wrap" v-if="detailVisible">
      <cus-nav></cus-nav>
      <h3 id="baseInfo">基础信息</h3>
      <el-row>
        <div class="field-item">
          <div class="field-tit">个人头像</div>
          <div class="field-cont"><img :src="'/customer/fans/avatar/'+ cusInfo.baseInfo.ssoid" alt="" class="avatar"></div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">用户名</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.username)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">真实姓名</div>
          <div class="field-cont">{{cusInfo.baseInfo.realName}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">手机号</div>
          <div class="field-cont">{{isEmpty()}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">邮箱</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.email)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">性别</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.sex)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">婚姻状况</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.maritalStatus)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">生日</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.birthday)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">年龄</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.year)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">所在地</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.city)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">教育程度</div>
          <div class="field-cont">{{isEmpty(cusInfo.baseInfo.edu)}}</div>
        </div>
      </el-row>
      <h3 id="memberInfo">会员信息</h3>
      <el-row>
        <div class="field-item">
          <div class="field-tit">是否会员</div>
          <div class="field-cont">{{isEmpty()}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">是否冻结</div>
          <div class="field-cont">{{isEmpty(cusInfo.memberInfo.freeze)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">ssoid</div>
          <div class="field-cont">{{isEmpty(cusInfo.memberInfo.ssoid)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">注册时间</div>
          <div class="field-cont">{{isEmpty(cusInfo.memberInfo.registerTime)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">注册来源</div>
          <div class="field-cont">{{isEmpty(cusInfo.memberInfo.source)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">注册方式</div>
          <div class="field-cont">{{isEmpty(cusInfo.memberInfo.registerType)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">会员等级</div>
          <div class="field-cont">{{isEmpty(cusInfo.memberInfo.level)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">积分</div>
          <div class="field-cont">{{isEmpty(cusInfo.memberInfo.integral)}}</div>
        </div>
      </el-row>
      <h3 id="socialInfo">兴趣与社交属性</h3>
      <el-row>
        <div class="field-item">
          <div class="field-tit">是否公司员工</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.companyStatus)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">铁粉社区ID</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.tfansId)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">铁粉社区用户组</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.tfansGroup)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">铁粉社区等级</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.tfansLevel)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">社区体力值</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.tfansPower)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">发帖数量</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.tfansPostNum)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">回帖数量</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.tfansBackpostNum)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">客户创建时间</div>
          <div class="field-cont">{{isEmpty()}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">最后交互时间</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.activityTime)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">是否关注微信</div>
          <div class="field-cont">{{isEmpty()}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">是否关注微博</div>
          <div class="field-cont">{{isEmpty()}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">微信ID</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.weixinId)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">微信昵称</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.weixinNickname)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">微博ID</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.weiboId)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">微博昵称</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.weiboNickname)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">兴趣爱好</div>
          <div class="field-cont">{{isEmpty(cusInfo.socialInfo.interest)}}</div>
        </div>
      </el-row>
      <h3 id="householdInfo">家电基本信息</h3>
      <el-table :data="cusInfo.householdInfo" max-height="300" class="tb-household">
        <el-table-column prop="brand" label="产品品牌"></el-table-column>
        <el-table-column prop="type1" label="产品大类"></el-table-column>
        <el-table-column prop="fixType" label="保修类型"></el-table-column>
        <el-table-column prop="type2" label="产品小类"></el-table-column>
        <el-table-column prop="bodyCase" label="机身码"></el-table-column>
        <el-table-column prop="model" label="规格型号"></el-table-column>
        <el-table-column prop="size" label="尺寸"></el-table-column>
        <el-table-column prop="buyNum" label="购买数量"></el-table-column>
        <el-table-column prop="buyPrice" label="购买价格"></el-table-column>
        <el-table-column prop="buyChannel" label="购买渠道"></el-table-column>
        <el-table-column label="购买时间"></el-table-column>
        <el-table-column prop="genuineStatus" label="是否正品机"></el-table-column>
        <el-table-column prop="engineStatus" label="是否工程机"></el-table-column>
        <el-table-column prop="machineType" label="机号状态"></el-table-column>
        <el-table-column prop="haveAfterSale" label="是否有售后"></el-table-column>
        <el-table-column prop="productionDate" label="生产日期"></el-table-column>
        <el-table-column prop="dealer" label="经销商"></el-table-column>
        <el-table-column prop="demandType1" label="需求大类"></el-table-column>
        <el-table-column prop="demandType2" label="需求小类"></el-table-column>
        <el-table-column prop="demandDeadline" label="需求截止时间" width="100"></el-table-column>
        <el-table-column prop="demandDetail" label="需求描述"></el-table-column>
        <el-table-column prop="acceptedTime" label="受理时间"></el-table-column>
        <el-table-column prop="acceptedAgency" label="受理机构名称" width="100"></el-table-column>
      </el-table>
      <h3 id="familyInfo">家庭信息</h3>
      <el-row>
        <div class="field-item">
          <div class="field-tit">工作行业</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.career)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">子女人数</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.childrenNum)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">工作单位</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.campany)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">子女年龄</div>
          <div class="field-cont">{{isEmpty()}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">是否有车</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.carStatus)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">父母人数</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.parentsNum)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">车档次</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.carType)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">父母年龄</div>
          <div class="field-cont">{{isEmpty()}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">年工作收入</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.income)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">家庭年收入</div>
          <div class="field-cont">{{isEmpty(cusInfo.familyInfo.familyIncome)}}</div>
        </div>
      </el-row>
      <h3 id="demandInfo">消费需求</h3>
      <el-row>
        <div class="field-item">
          <div class="field-tit">消费等级</div>
          <div class="field-cont">{{isEmpty(cusInfo.demandInfo.consumeLevel)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">价格敏感度</div>
          <div class="field-cont">{{isEmpty(cusInfo.demandInfo.priceSensitive)}}</div>
        </div>
      </el-row>
      <el-row>
        <div class="field-item">
          <div class="field-tit">营销活动接受度</div>
          <div class="field-cont">{{isEmpty(cusInfo.demandInfo.activityAccept)}}</div>
        </div>
        <div class="field-item">
          <div class="field-tit">购买意图</div>
          <div class="field-cont">{{isEmpty(cusInfo.demandInfo.buyIntention)}}</div>
        </div>
      </el-row>
      <h3 id="tagInfo">标签/群组</h3>
      <table class="tb-tags">
        <tr>
          <th class="col1">标签类别</th>
          <td class="col2">具体标签</td>
          <td class="col3" :rowspan="cusTags&&cusTags.length+1"></td>
          <th class="col4" :rowspan="cusTags&&cusTags.length+1">群组</th>
          <td class="col5" :rowspan="cusTags&&cusTags.length+1">
            <el-tag v-for="item in cusGroups" :key="item.groupId" :closable="true" type="danger" @close="handleDelGroup(item.groupId)">{{item.groupName}}</el-tag>
          </td>
        </tr>
        <tr v-for="item in cusTags">
          <th>{{item.className}}</th>
          <td class="tagsTd"><el-tag v-for="item in item.tags" :key="item.tagId" :closable="true" type="danger" @close="handleDelTag(item.tagId)">{{item.name}}</el-tag></td>
        </tr>
        <tr class="tb-footer">
          <td colspan=2>
            <div><el-button icon="plus" size="small" @click="showAddTag=true">添加标签</el-button></div>
            <div v-if="showAddTag">
              <el-select v-model="tagID" remote filterable clearable :remote-method="queryTagAsync" :loading="loading" placeholder="请输入标签关键词">
                <el-option v-for="item,n in tagList.list" :value="item.id" :label="item.name + ' （分类：' + item.pname + '）'" :key="n.toString()"></el-option>
              </el-select>
              <el-button type="primary" @click="handleAddTag">确定</el-button>
            </div>
          </td>
          <td></td>
          <td colspan=2>
            <div><el-button icon="plus" size="small" @click="showAddGroup=true">添加静态群组</el-button></div>
            <div v-if="showAddGroup">
              <el-select v-model="groupId" remote filterable clearable :remote-method="queryGroupAsync" :loading="loading" placeholder="请输入群组关键词">
                <el-option v-for="item,n in groupList.list" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
              </el-select>
              <el-button type="primary" @click="handleAddGroup">确定</el-button>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="axis-wrap" v-else-if="axisVisible">
      <div class="year-wrap clearfix">
        <div class="yearNode clearfix">
          <h2>2017-11-17<i class="el-icon-caret-bottom"></i></h2>
          <span class="dot"></span>
        </div>
        <div class="timeNode fl">
          <div class="time-wrap">
            <p>15:36:50</p>
          </div>
          <div class="node-bg">i</div>
          <div class="title-desc">
            <h3>这是标题</h3>
            <p>这是描述这是描述这是描述</p>
          </div>
          <div class="time-line"></div>
        </div>
        <div class="timeNode fl">
          <div class="time-wrap">
            <p>15:36:50</p>
          </div>
          <div class="node-bg">i</div>
          <div class="title-desc">
            <h3>这是标题</h3>
            <p>这是描述这是描述这是描述</p>
          </div>
          <div class="time-line"></div>
        </div>
      </div>
      <div class="year-wrap clearfix">
        <div class="yearNode clearfix">
          <h2>2017-11-17<i class="el-icon-caret-bottom"></i></h2>
          <span class="dot"></span>
        </div>
        <div class="timeNode fl">
          <div class="time-wrap">
            <p>15:36:50</p>
          </div>
          <div class="node-bg">i</div>
          <div class="title-desc">
            <h3>这是标题</h3>
            <p>这是描述这是描述这是描述</p>
          </div>
          <div class="time-line"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import cusNav from '@/components/common/cusManage/customerNav'
  import env from '@/config/env'
  export default {
    components: {cusNav},
    data () {
      return {
        tagID: '',
        groupId: '',
        showAddTag: false,
        showAddGroup: false,
        loading: false,
        baseUrl: env.baseUrl2,
        detailVisible: true,
        recordVisible: false,
        axisVisible: false,
        tbLoading: false,
        recordDetail: [],
        importTime: false,
        recordTable: {
          lastImportTime: '暂无导入',
          page: {
            page: 1,
            total: 0,
            size: 10
          }
        },
        ssoid: this.$route.params.sid,
        importSuccess: 0,
        importFail: 0,
        importFailKey: ''
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        cusInfo: state => state.cusManage.cusInfo,
        cusTags: state => state.cusManage.customerTags,
        cusGroups: state => state.cusManage.customerGroups,
        tagList: state => state.cusManage.tagList,
        groupList: state => state.cusManage.groupList
      }),
      // 文件上传附加的头部
      headers () {
        return {
          UBToken: localStorage.getItem('UBToken')
        }
      }
    },
    methods: {
      ...mapActions(['getCustomerInfo', 'getCusTagsWithClass', 'searchTags', 'addCusTagByID', 'delCusTag', 'getGroupsInCus', 'addToStaticGroup', 'getCusGroups', 'delCusFromGroup', 'getCusSummary', 'importCusData', 'getCusDetail', 'exportCusOrderData']),
      // 初始化页面数据
      initPageData () {
        let sid = this.$route.params.sid
        this.getCusDetail({ ssoid: this.ssoid, page: this.recordTable.page.page, size: this.recordTable.page.size }).then((res) => {
          this.recordTable = res.data.data
          if (res.data.data.lastImportTime) {
            this.importTime = true
          }
        })
        this.getCustomerInfo({type: 1, ssoid: sid})
        this.getCustomerInfo({type: 2, ssoid: sid})
        this.getCustomerInfo({type: 3, ssoid: sid})
        this.getCustomerInfo({type: 4, ssoid: sid})
        this.getCustomerInfo({type: 5, ssoid: sid})
        this.getCustomerInfo({type: 6, ssoid: sid})
        this.getCusTagsWithClass(sid)
        this.getGroupsInCus(sid)
      },
      // 字段是否为空
      isEmpty (val) {
        if (val || val === 0) {
          return val
        } else {
          return '—'
        }
      },
      // 保留2位小数
      toDemical (num) {
        if (isNaN(parseFloat(num))) {
          return false
        }
        let f = Math.round(num * 100) / 100
        let s = f.toString()
        let rs = s.indexOf('.')
        if (rs < 0) {
          rs = s.length
          s += '.'
        }
        while (s.length <= rs + 2) {
          s += '0'
        }
        return s
      },
      // 异步查询标签提示
      queryTagAsync (queryString) {
        let wd = queryString
        let gid = this.groupId
        let page = 1
        let size = 10
        this.searchTags({wd, gid, page, size})
      },
      // 添加新标签
      async handleAddTag () {
        let sid = this.$route.params.sid
        let tagId = this.tagID
        let res = await this.addCusTagByID({tagId, ssoids: [sid]})
        if (res.data.code === 1) {
          this.getCusTagsWithClass(sid)
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        }
      },
      // 删除标签
      async handleDelTag (tagId) {
        let sid = this.$route.params.sid
        let res = await this.delCusTag({
          tagId: tagId,
          ssoids: [sid]
        })
        if (res.data.code === 1) {
          this.getCusTagsWithClass(sid)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }
      },
      // 异步查询群组提示
      queryGroupAsync (queryString) {
        this.getCusGroups({
          wd: queryString,
          status: 1,
          type: 2,
          size: 10,
          page: 1,
          customerType: 1
        })
      },
      // 添加新群组
      async handleAddGroup () {
        let sid = this.$route.params.sid
        let res = await this.addToStaticGroup({groupId: this.groupId, ssoids: [sid]})
        if (res.data.code === 1) {
          this.getGroupsInCus(sid)
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        }
      },
      // 删除群组
      async handleDelGroup (groupId) {
        let sid = this.$route.params.sid
        let res = await this.delCusFromGroup({groupId: groupId, ssoids: [sid]})
        if (res.data.code === 1) {
          this.getGroupsInCus(sid)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        }
      },
      // 头部切换
      handleSwitchNav (item) {
        // console.log(this.cusInfo.baseInfo.ssoid)
        // let sid = this.cusInfo.baseInfo.ssoid
        if (item === 1) {
          this.detailVisible = false
          this.axisVisible = false
          this.recordVisible = true
          this.getCusSummary(this.ssoid).then((res) => {
            this.recordDetail = res.data.data
          })
        } else if (item === 2) {
          this.detailVisible = false
          this.recordVisible = false
          this.axisVisible = true
        } else {
          this.recordVisible = false
          this.axisVisible = false
          this.detailVisible = true
        }
      },
      handleRemove (file) {
        // console.log(file)
      },
      submitUpload () {
        this.$refs.upload.submit()
      },
      handleImport (response, file) {
        this.$alert('成功导入' + response.data.successImportNum + '条数据', '导入结果', {
          confirmButtonText: '确定'
        })
        this.getCusSummary(this.ssoid).then((res) => {
          this.recordDetail = res.data.data
        })
        this.getCusDetail({ ssoid: this.ssoid, page: this.recordTable.page.page, size: this.recordTable.page.size }).then((res) => {
          this.tbLoading = true
          if (res.data.code === 1) {
            this.tbLoading = false
            this.recordTable = res.data.data
            this.importTime = true
            this.tbLoading = false
          } else {
            this.$message({
              type: 'info',
              message: res.data.msgZ
            })
          }
        })
        /* let sid = this.cusInfo.baseInfo.ssoid
        this.importCusData({ssoid: sid, file: file}).then((res) => {
          console.log(res)
        }) */
      },
      handleExport () {
        this.exportCusOrderData(this.ssoid)
      },
      // 分页
      handleSearchCount () {
        this.tbLoading = true
        this.getCusDetail({
          ssoid: this.ssoid,
          page: this.recordTable.page.current,
          size: this.recordTable.page.size
        }).then((res) => {
          this.recordTable = res.data.data
          this.tbLoading = false
        })
      },
      // 改变分页大小
      handleResSizeChange (size) {
        this.getCusDetail({
          ssoid: this.ssoid,
          page: this.recordTable.page.current,
          size: size
        }).then((res) => {
          this.recordTable = res.data.data
        })
      }
    }
  }
</script>
<style lang="scss">
  .head-nav{
    margin-top:-24px;height:50px;line-height:50px;border-bottom:1px solid #e0e6ed;
    a{
      color:#4d5c6e;font-weight:500;font-size:16px;display:inline-block;text-decoration: none;margin-left: 35px;
    }
    a:first-child{
      margin-left: 0;
    }
    a.cur,a:hover{
      color:#ff0000;
    }
  }
  .customer-detail{
    .navs{
      &{margin-top:20px;height:36px;line-height:36px;}
      .inner{padding:0 22px;background:#eff2f7;}
      .inner.fixed{position:fixed;top:0;margin-top:0;z-index:100}
      a{margin:0 20px;font-size:14px;color:#4c5b6d;text-decoration:none;cursor:pointer;}
      a.active{color:#fe4e4e}
    }
    h3{margin:30px 0 12px 20px;font-size:16px}
    .field-item{
      display:inline-block;width:320px;font-size:14px;vertical-align:top;
      .field-tit{float:left;width:110px;text-align:right;}
      .field-cont{margin-left:135px;line-height: 36px;}
    }
    .avatar{width:88px;height:88px;border-radius:44px;border:1px solid #bcc6d3;overflow:hidden;}
    .el-row{margin-bottom:20px;}
    .tb-household{
      .cell{padding:0 5px;text-align:center;}
    }
    .tb-tags{
      border-collapse:collapse;font-size:14px;
      th{background:#eef1f6;line-height:34px;border:1px solid #e0e6ed;}
      td{border:1px solid #e0e6ed;text-align:center;}
      .col1{width:158px;}
      .col2{width:258px;}
      .col3{width:48px;border:0;}
      .col4{width:158px;}
      .col5{width:258px;}
      .tagsTd{padding:6px;text-align:left;}
      .tb-footer td{padding-top:10px;text-align:left;border:0;vertical-align:top;}
      .el-tag{margin:4px 4px;}
      .el-button{margin-bottom:10px;}
    }
    .record-wrap{
      margin: 15px 0 0;
      h2{
        border: 1px solid #e0e6ed;
        padding: 15px;
      }
      .btn-imex{
        margin: 12px 0;
        a{
          display: inline;
          text-decoration: none;
          color: #20a0ff;
          font-size: 14px;
        }
        .btn-import{
          display: inline-block;
          margin: 0 8px;
          button{
            font: 14px/1.5 microsoft yahei;
          }
          .el-upload-list{
            display: none;
          }
        }
        .btn-download{
          border: 1px solid #c2e7b0;
          color: #67c23a;
          padding: 8px 10px;
          border-radius: 4px;
        }
        .btn-download:hover{
          border-color: #67c23a;
          background: #67c23a;
          color: #fff;
        }
        .btn-export{
          border: 1px solid rgb(191, 203, 217);
          color: rgb(31, 45, 61);
          padding: 8px 10px;
          border-radius: 4px;
        }
        .btn-export:hover{
          border-color: #20a0ff;
          color: #20a0ff;
        }
      }
      .import-time{
        display:inline;
        margin-right: 30px;
      }
      .summary{
        border: 1px solid #e0e6ed;
        border-top: none;
        margin-bottom: 30px;
        section{
          width:20%;
          float: left;
          text-align: center;
          font-size: 16px;
          line-height: 30px;
          padding: 20px 0;
        }
      }
    }
    .axis-wrap{
      display: none;
      .fl{float: left;}
      .fr{float: right;}
      margin: 30px 0 10px;
      .yearNode{
        h2{
          font-size: 16px;
          font-weight: normal;
          float: left;
          .el-icon-caret-bottom{
            padding: 0 10px;
            color: #999;
            font-size: 12px;
          }
        }
        .dot{
          width: 15px;
          height: 15px;
          background: #e5e5e5;
          float: left;
          border-radius: 10px;
          margin: 5px 0 0 30px;
        }
      }
      .timeNode{
        position: relative;
        margin-left: 110px;
        padding: 45px 0 0;
        height: 130px;
        width: 90%;
        .time-wrap{
          position: absolute;
          top: 50px;
          left: -40px;
          p{
            font-size: 14px;
          }
        }
        .node-bg{
          width: 30px;
          height: 30px;
          border-radius: 15px;
          text-align: center;
          border: 2px solid #f1f1f1;
          background: #fff;
          float: left;
          position: relative;
          z-index: 5;
          margin-left: 30px;
        }
        .title-desc{
          float: left;
          margin-left: 35px;
          margin-top: -10px;
          h3{
            font-size: 18px;
            line-height: 35px;
            margin: 0;
          }
          p{
            font-size: 14px;
          }
        }
        .time-line{
          position: absolute;
          height: 100%;
          top: -5px;
          left: 47px;
          border-left: 2px solid #e5e5e5;
          padding-bottom: 10px;
        }
      }
    }
  }
  .clearfix:after{display:block;content:'';height:0;clear:both;visibility:hidden;}
</style>
